<template>
	<a-modal
		class="batch-add-modal"
		:open="batchAddModalOpen"
		ok-text="导入"
		:title="`批量新增`"
		width="562px"
		:body-style="{ minHeight: '325px' }"
		:ok-button-props="{
			loading: confirmLoading,
			disabled: fileList.length === 0
		}"
		:mask-closable="false"
		@cancel="onClose"
		@ok="confirm"
	>
		<div class="content">
			<div class="top-template">
				<div>请先下载导入模板，批量填写摄像头信息</div>
				<a-button @click="downloadTemplate">下载模板</a-button>
			</div>
			<a-upload-dragger
				:file-list="fileList"
				name="file"
				:multiple="false"
				:accept="'.XLSX,.XLS'"
				class="upload-box"
				:custom-request="customRequest"
				:before-upload="beforeUpload"
				@remove="fileList = []"
			>
				<global-svg-icon
					icon-name="batch-upload-icon"
					width="30px"
					height="28px"
					style="margin-bottom: 16px; color: rgba(255, 255, 255, 0.15)"
				></global-svg-icon>
				<p class="ant-upload-text">点击或拖拽上传文件</p>
				<p class="ant-upload-hint">支持XLSX、XLS格式，限20M以内</p>
			</a-upload-dragger>
		</div>
	</a-modal>
	<!-- 导入失败弹窗 -->
	<a-modal :open="configFailVisible" :footer="null" :title="'提示'" :width="418" :mask-closable="false" @cancel="configFailVisible = false">
		<div class="config-fail-modal">
			<div class="config-fail"><close-circle-filled class="error-icon"></close-circle-filled>批量导入失败，请下载文件查看失败原因</div>
			<div class="link">
				<a-button class="download-btn" @click="downLoadFailFile">下载文件</a-button>
			</div>
		</div>
	</a-modal>
</template>

<script lang="ts" setup>
import { DownloadBlobToAssignFile } from '@/global-utils/base.utils';
import { CameraManagementAPI } from '../../api';

const emits = defineEmits<{
	(e: 'close'): void;
}>();
const batchAddModalOpen = ref(false);
const fileList = ref<any[]>([]);
const $message: any = inject('$message');
const confirmLoading = ref(false);
const configFailVisible = ref(false);
const configFailPath = ref('');
// 下载模板
const downloadTemplate = async () => {
	let res = await CameraManagementAPI.downloadAddTemplate();
	DownloadBlobToAssignFile(res.data, '批量添加摄像头模板.xlsx');
};

// 限制文件大小
const beforeUpload = (file: any) => {
	const isXlsxOrXls =
		file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
	if (!isXlsxOrXls) {
		$message.error('只能上传 .XLSX 或 .XLS 格式的文件!');
		return false;
	}
	const isLimit = file.size / 1024 / 1024 < 20;
	if (!isLimit) {
		$message.error('文件大小不能超过20MB!');
	}
	fileList.value = [];
	return isLimit;
};
const customRequest = async (e: any) => {
	const { onProgress, onSuccess, file } = e;
	onProgress({ percent: 0 });
	await setTimeout(() => {
		onProgress({ percent: 100 });
		onSuccess('上传成功');
	}, 100);
	fileList.value = [file];
};
const onClose = () => {
	batchAddModalOpen.value = false;
};

const confirm = async () => {
	const formData = new FormData();
	formData.append('file', fileList.value[0]);
	confirmLoading.value = true;
	try {
		let res = await CameraManagementAPI.batchImportDevice(formData);
		confirmLoading.value = false;
		batchAddModalOpen.value = false;
		emits('close');
		console.log('响应', res);
		if (res.data.success) {
			return $message.success('批量添加摄像头成功！');
		}
		if (res.data.failedFile) {
			configFailVisible.value = true;
			configFailPath.value = res.data.failedFile;
		}
	} catch (error) {
		confirmLoading.value = false;
	}
};

// 导出配置失败的文件
const downLoadFailFile = async () => {
	let param = {
		path: configFailPath.value
	};
	let res = await CameraManagementAPI.downloadFailDevice(param);
	DownloadBlobToAssignFile(res.data, '批量添加摄像头模板.xlsx');
	configFailVisible.value = false;
	configFailPath.value = '';
};

const resetModal = () => {
	configFailPath.value = '';
	confirmLoading.value = false;
	configFailVisible.value = false;
	fileList.value = [];
};

const open = () => {
	batchAddModalOpen.value = true;
	resetModal();
};
defineExpose({ open });
</script>

<style lang="less" scoped>
.batch-add-modal {
	.content {
		padding: 40px;

		.top-template {
			display: flex;
			margin-bottom: 24px;
			border-radius: 6px;
			padding: 12px 16px;
			color: @text01;
			background: @mask01;
			justify-content: space-between;
			align-items: center;
			align-self: stretch;
		}

		.upload-box {
			border-radius: 6px;

			:deep(.ant-upload-drag) {
				border: 1px solid #2b3a50 !important;
				color: @text01;

				.ant-upload-btn {
					display: flex;
					height: 161px;
					padding: 40px 69px 16px;
					flex-flow: column;
					align-items: center;
				}
			}

			:deep(.ant-upload-list) {
				margin-top: 8px;

				.ant-upload-list-item-container {
					.ant-upload-list-item {
						padding-left: 4px;
						color: @text01;
						cursor: pointer;

						&:hover {
							border-radius: 4px;
							color: @text01;
							background-color: #181f30;
						}

						.anticon-delete {
							color: @text01 !important;
						}
					}
				}
			}
			// :deep(.ant-upload-list-item-container) {
			// 	color: @text01;
			// 	background-color: red;

			// 	&:hover {
			// 		// color: @text01;
			// 	}
			// }

			.ant-upload-text {
				font-size: 12px;
				line-height: 20px;
				color: @text02;
			}

			.ant-upload-hint {
				font-size: 12px;
				line-height: 20px;
				color: @text04;
			}
		}
	}
}

.config-fail-modal {
	.config-fail {
		display: flex;
		padding: 40px;
		font-size: 14px;
		color: @text01;
		align-items: center;

		.error-icon {
			margin-right: 16px;
			font-size: 20px;
			color: rgba(228, 72, 51, 1);
		}
	}

	.link {
		display: flex;
		padding: 20px 24px;
		padding-bottom: 12px;
		justify-content: center;

		.download-btn {
			border-radius: 8px;
			padding: 8px 16px;
		}
	}
}
</style>
